import React, { Component } from 'react'
import axios from 'axios'
import { ArrowLeft } from '@react-vant/icons';


export class Detail extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       detailObj:''
    }
  }
  componentDidMount(){
    axios.get('/api/detail',{
      params:{
        id:this.props.match.params.id
      }
    }).then((res)=>{
      this.setState({
        detailObj:res.data
      })
    })
  }
  render() {
    const {detailObj} = this.state
    return (
      <div className='details'>
        <header><ArrowLeft onClick={()=>{this.props.history.push('/home/index')}}/></header>
        <dl>
          <dt><img src={detailObj.img} alt="" /></dt>
          <dd>
            <h3>{detailObj.title}</h3>
            <p>{detailObj.price}</p>
          </dd>
        </dl>
      </div>
    )
  }
}

export default Detail